<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./products.js"></script>
  <script>
    // 全局变量products
    console.log(products)
    // 要求：先到控制台观察数据的属性和解构，然后按要求筛选或转换数据
    // 商品名字段name
    // 0. 取itemType是'ART' 并且 price.regularPrice<200
    console.log(products
      .filter(p => p.itemType === 'ART'
        && p.price.regularPrice < 200))

    // 1.取出所有类型（productType）为 “背包”且颜色（designText）不为“蓝色”的商品
    const arr = products.filter(function (items) {
      return items.productType === '背包'
    }).filter(function (item) {
      return item.designText !== '蓝色'
    }).map(function (na) {
      return na.name + na.designText + na.productType
    }).join("")
    console.log(arr);

    // 2.取出所有类型（productType）含有“袋”字，并且是新品（new=true）的商品名字的数组
    // filter -> indexOf
    const arr1 = products.filter(function (n) {
      return n.productType.indexOf("袋") !== -1
    }).filter(function (v) {
      return v.new === true
    }).map(function (a) {
      return a.name + a.designText + a.productType
    })
    console.log(arr1);

    // 3.选出价格最贵（价格的属性price.regularPrice）的十个商品(从高到低)，并转换为html字符串，html的格式为
    /*
      <ul>
        <li><img src='图片属性（image)' />商品名：n元</li>
        <li><img src='图片属性（image)' />商品名：n元</li>
        <li><img src='图片属性（image)' />商品名：n元</li>
        <li><img src='图片属性（image)' />商品名：n元</li>
      </ul>
    */
    const arr3 = `<ul>
        ${[...products].sort(function (a, b) {   //{price:{regularPrice:a}},{price:{regularPrice:b}}
      return b.price.regularPrice - a.price.regularPrice
    }).slice(0, 10).map(function (gui) {
      return `<li><img src='${gui.image}' /><br/>商品名:${gui.name + gui.designText + gui.productType} <br/> 价格：${gui.price.regularPrice}元</li>`
    }).join("")}
      </ul>`
    document.write(arr3);

  </script>
</body>

</html>